<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ResNeXt 图像分类平台</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
</head>
<body>
    <div class="main-container">
        <aside class="sidebar">
            <div class="sidebar-header">
                <h3> ResNeXt 分类平台</h3>
            </div>
            <nav class="sidebar-nav">
                <ul>
                    <li><a href="#" class="nav-link active" data-target="training-section">分类训练</a></li>
                    <li><a href="#" class="nav-link" data-target="validation-section">训练验证</a></li>
                    <li><a href="#" class="nav-link" data-target="testing-section">用户测试</a></li>
                    <li class="nav-divider"></li>
                    <li><a href="#" class="nav-link" data-target="json-generator-section">生成JSON</a></li>
                </ul>
            </nav>
            <footer>
                <p>Model:ResNeXt50_32x4d</p>
                <p>Import: Flask, PyTorch, Chart.js</p>
                <p>(LaoXue@2025)</p>
            </footer>
        </aside>

        <main class="content">
            <!-- 分类训练 Section -->
            <section id="training-section" class="content-section active">
                <header>
                    <h1>分类训练</h1>
                    <div class="controls">
                        <button class="upload-btn" data-purpose="training">上传训练JSON</button>
                        <input type="file" class="json-upload-input" accept=".json" style="display: none;" data-purpose="training">
                        <button class="start-btn" data-purpose="training" disabled>开始训练</button>
                    </div>
                </header>
                <div class="status-area">
                    <p class="status-text">请先上传一个JSON文件来开始训练...</p>
                </div>
                <div id="training-progress-container" class="progress-container">
                    <h3>训练进度</h3>
                    <div class="progress-bar">
                        <div class="progress-fill" style="width: 0%;"></div>
                    </div>
                    <p class="progress-text">当前进度: 0%</p>                    
                </div>                   
                <div class="charts-grid">
                    <div class="chart-container">
                        <h3>训练损失 (Training Loss)</h3>
                        <canvas id="trainingLossChart"></canvas>
                        <div class="chart-description">
                            <p><strong>说明:</strong> 这条曲线展示了模型在训练过程中的损失值变化。一个理想的训练过程，损失曲线应该是平滑下降并最终趋于平稳。如果曲线剧烈震荡或不下降，可能意味着学习率（lr）太高。如果下降非常缓慢，可能学习率太低。</p>
                        </div>
                    </div>
                    <div class="chart-container">
                        <h3>训练准确率 (Training Accuracy)</h3>
                        <canvas id="trainingAccChart"></canvas>
                        <div class="chart-description">
                            <p><strong>说明:</strong> 这条曲线展示了模型在训练集上的分类准确率。理想情况下，它会稳步上升并接近一个高值（如90%以上）。如果准确率停滞不前，可能意味着模型不够复杂、数据质量差或学习率设置不当。</p>
                        </div>
                    </div>
                </div>
                <div class="model-info-bar">
                    <p/>
                    <p/>
                    <p id="training-current-model-text">当前使用的模型: <span>无</span></p>
                </div>

            </section>

            <!-- 训练验证 Section -->
            <section id="validation-section" class="content-section">
                <header>
                    <h1>训练验证</h1>
                    <div class="controls">
                        <button class="upload-btn" data-purpose="validation">上传验证JSON</button>
                        <input type="file" class="json-upload-input" accept=".json" style="display: none;" data-purpose="validation">
                        <button class="start-btn" data-purpose="validation" disabled>开始验证</button>
                    </div>
                </header>
                <div class="status-area">
                    <p class="status-text">请上传用于验证的JSON文件...</p>
                </div>
                
                <div class="model-info-bar">
                    <p id="validation-current-model-text">当前使用的模型: <span>无</span></p>
                </div>

                <div class="charts-grid">
                    <div class="chart-container">
                        <h3>验证损失 (Validation Loss)</h3>
                        <canvas id="validationLossChart"></canvas>
                    </div>
                    <div class="chart-container">
                        <h3>验证准确率 (Validation Accuracy)</h3>
                        <canvas id="validationAccChart"></canvas>
                    </div>
                </div>

                <div class="model-management-area">
                    <button id="download-model-btn" class="upload-btn">下载当前模型 (ZIP)</button>
                    <select id="model-select" class="upload-btn" style="min-width:220px;">
                        <option value="">正在加载模型列表...</option>
                    </select>
                    <button id="set-model-btn" class="upload-btn">切换为选中模型</button>
                    <button id="refresh-models-btn" class="upload-btn">手动刷新模型列表</button>
                </div>
            </section>

            <!-- 用户测试 Section -->
            <section id="testing-section" class="content-section">
                <header>
                    <h1>用户测试</h1>
                </header>
                <div class="user-test-area">
                    <div class="image-upload-container">
                        <input type="file" id="image-upload-input" accept="image/*" style="display: none;">
                        <button id="select-image-btn">选择图片</button>
                        <div id="image-preview-container">
                            <img id="image-preview" src="#" alt="图片预览" style="display: none;"/>
                        </div>
                        <button id="predict-btn" disabled>识 别</button>
                    </div>
                    <div id="prediction-result-container">
                        <h3>识别结果:</h3>
                        <p id="prediction-result-text">-</p>
                    </div>
                </div>
            </section>

            <!-- 生成JSON Section -->
            <section id="json-generator-section" class="content-section">
                <header>
                    <h1>生成JSON</h1>
                    <div class="controls">
                        <button id="execute-sql-btn">运行SQL</button>
                        <button id="download-json-btn" disabled>下载JSON</button>
                    </div>
                </header>
                <div class="status-area">
                    <p class="status-text">请输入SQL语句并点击运行...</p>
                </div>
                
                <div class="sql-input-container">
                    <label for="sql-input">SQL查询语句:</label>
                    <textarea id="sql-input" rows="12" placeholder="请输入SQL语句...">SELECT 
    id,
    point_type,
    point_type_name,
    point_code,
    point_name,
    material_file_key,
    material_file_name 
FROM ulmat_material_upload umu 
WHERE material_file_key IS NOT NULL
LIMIT 10;</textarea>
                </div>
                
                <div id="json-result-container" class="json-result-container" style="display: none;">
                    <h3>生成的JSON预览:</h3>
                    <div id="json-preview" class="json-preview"></div>
                    <p id="json-info" class="json-info"></p>
                </div>
            </section>
        </main>
    </div>

    <script src="{{ url_for('static', filename='js/script.js') }}"></script>
</body>
</html>